<template>
    <div class="drawer-container">
        <el-drawer :model-value="drawer" :size="size" :title="title" :close-on-click-modal="false"
            :close-on-press-escape="false" :destroy-on-close="true">
            <div class="drawer-out">
                <slot></slot>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取消</el-button>
                    <el-button type="primary" @click="onClick(formRef)" :loading="loading">确认</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'
const drawer = ref(false);
const loading = ref(false);
const openDrawer = () => {
    drawer.value = true;
}
const closeDrawer = () => {
    drawer.value = false;
}
const showLoading = () => {
    loading.value = true;
}
const hideLoading = () => {
    loading.value = false;
}
const cancelForm = () => {
    closeDrawer();
}
/**提交 */
const onClick = () => {
    emits('submit')
}
defineProps({
    size: {
        tyle: String,
        default: '30%'
    },
    title: String,
})
defineExpose({
    openDrawer,
    closeDrawer,
    showLoading,
    hideLoading
})
const emits = defineEmits(['submit'])
</script>
<style scoped lang='scss'>
.demo-drawer__footer {
    position: absolute;
    bottom: 30px;
}
</style>
